<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.image {
				width: 1600px;
				height: 200px;
				background-color: cornflowerblue;
				position: absolute;
				top:20px;
				left: 0;
			}
			
			.image ul li {
				list-style: none;
				float: left;
			}
			
			
			
			a {
				padding: 10px 10px;
			}
			
			ul li a img {
				width: 200px;
				height: 150px;
			}
			
			.main {
				width: 1600px;
				height: 1000px;
				position: relative;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<img src="img/image/1.jpg" id="bgimg" />
			<div class="image">
				<ul>
					<li>
						<a href="#" name="img/image/1.jpg"><img src="img/image/1.jpg" /></a>
					</li>
					<li>
						<a href="#" name="img/image/2.jpg"><img src="img/image/2.jpg" /></a>
					</li>
					<li>
						<a href="#" name="img/image/3.jpg"><img src="img/image/3.jpg" /></a>
					</li>
					<li>
						<a href="#" name="img/image/4.jpg"><img src="img/image/4.jpg" /></a>
					</li>
					<li>
						<a href="#" name="img/image/5.jpg"><img src="img/image/5.jpg" /></a>
					</li>

				</ul>
			</div>

		</div>
	</body>
	<script>
		var bgimg = document.getElementById("bgimg");
		var aArray = document.getElementsByTagName("a");
		var body = document.getElementsByTagName("body");
		for (var i = 0; i < aArray.length; i++) {
			aArray[i].onclick = function() {
				bgimg.src = this.name;
			}
		}
	</script>

</html>